<%@ taglib uri="/WEB-INF/tld/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/tld/struts-logic.tld" prefix="logic"%>
<%@ taglib uri="/WEB-INF/tld/struts-bean.tld" prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles"%>

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title></title>
<link href="/WebFinalProject/css/FinalProjectCSS.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="table.js"></script>
<script type="text/javascript" src="validationWithJs.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker.min.css">
<link href="css/bootstrap-combined.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
	function flyToPage(task) {
		document.forms[0].task.value = task;
		document.forms[0].submit();
	}
	
	function updateNBackToList(){
		document.forms[0].task.value = "backToListExamPrep";
		alert("updateNBackToList : "+document.forms[0].task.value);
		document.forms[0].submit();
	}
	
	function hideField(){
		document.forms[0].elements['modelExamPrepDetail.classId'].value="";
		document.forms[0].elements['modelExamPrepDetail.noOfQuestion'].value="";
		document.getElementById('insertRow').style.display='none';
	}
	function showFieldInsert(){
		document.getElementById('insertRow').style.display='';
	}
	
	function showNmberOfQuestion() {
		var classId = document.forms[0].elements['modelExamPrepDetail.classId'].value;
		var task = 'getNumOfQuest';
		$.ajax({
            type: "POST",
            url: "/WebFinalProject/Eclass.do",
            data: "modelExamPrepDetail.classId=" + classId + "&task=" + task,
            success: function(response){
            	$('#numOfQuest').html(response);
            },
            error: function(e){
                alert('Error: ' + e);
            }
        });
		//showSessionCombo();
	}
	
	function goToDetail(){
		document.getElementById('insertRow').style.display='';
	}
	
	function update(id){
		document.forms[0].elements['modelExamPrepDetail.examPrepDetailId'].value = id;
		document.forms[0].task.value = 'editSubjectExamPrepDet';
		document.forms[0].submit();
	}
	
	function deleteSubject(id,name){
		var cek = confirm('Are you sure want to Delete Exam Preparation Subject - '+ name +' ?');
		if(cek==true){
			document.forms[0].elements['modelExamPrepDetail.examPrepDetailId'].value = id;
			document.forms[0].task.value = 'deleteSubjectExamPrepDet';
			document.forms[0].submit();
		}
	}
	
	function validateNumOfQuestion(){
		var limitMaxQuest = document.getElementById('numberOfQuest').value;
		var numOfQuest = document.forms[0].elements['modelExamPrepDetail.noOfQuestion'].value;
		if(eval(numOfQuest) > eval(limitMaxQuest)){
			alert('Number Of Question yang Anda masukkan melebihi limit!');
			document.forms[0].elements['modelExamPrepDetail.noOfQuestion'].value = limitMaxQuest;
			return false;
		}
		return true;
	}
	
	function insertExamPrepDetail(){
		if(validateNumOfQuestion() == true){
			var cek = confirm('Are you sure want to Add New Exam Preparation Detail ?');
			if(cek==true){
				document.forms[0].task.value = 'insertExamPrepDetail';
				document.forms[0].submit();
			}
		}
	}	
	
</script>
<%
	if(session.getAttribute("result") != null){
		String message = session.getAttribute("result").toString();
		%>
			<script type="text/javascript">
				window.alert('<%=message%>');
			</script>
		<%
			session.removeAttribute("result");
	}
%>

</head>
<body onload="javascript:hideField();">
	<center>
		<table width="100%" class="bodyTable boxShadow">
		
			<!-- Header -->
			<tr>
				<td colspan="2"><%@include file="/include/Header.jsp"%></td>
			</tr>
		
			<!-- Content -->
			<tr>
				<td rowspan="2" width="200px" class="navigationBox"><%@include file="/include/Navigation.jsp"%></td>
				<td align="left" class="headerBox blueBackground">BreadCrumb</td>
			</tr>
			<tr>
				<td align="center" class="contentStyle"><br><br>
					<html:form action="/Eclass" method="post">
						<html:hidden property="task" name="eclassForm" />
						<html:hidden property="examFor" name="eclassForm" />
						<html:hidden property="modelExamPrep.examPrepId"  name="eclassForm" />
						<%-- <h1>modelExamPrep.examPrepId = <bean:write name="eclassForm" property="modelExamPrep.examPrepId" /></h1>
						<h2><bean:write name="eclassForm" property="resultQuery" /></h2>
						 --%>
						 
						<table width="50%" border="0" align="center" class="boxShadow  example table-autosort table-autofilter table-autopage:10 table-stripeclass:alternate table-page-number:t1page table-page-count:t1pages table-filtered-rowcount:t1filtercount table-rowcount:t1allcount" id="t1">
							<thead>
								<tr>
									<td colspan="3" align="center" class="formListStyle headerBox formHeaderBackground">Exam Preparation Detail List</td>
								</tr>	
								<tr align="center" class="greyBackground">
									<th class="formListStyle" align="center">Subject</th>
									<th class="formListStyle" align="center">Quantity</th>
									<th rowspan="2" align="center" class="formListStyle"></th>
								</tr>						
<!-- 								<tr align="center" class="headerBox greyBackground"> -->
<!-- 									<th width="200px" class="filterable table-sortable:default" align="center" style="vertical-align: middle;">Subject</th> -->
<!-- 									<th width="100px" class="filterable table-sortable:numeric" align="center" style="vertical-align: middle;">Quantity</th> -->
<!-- 									<th rowspan="2" width="100px" align="center" style="vertical-align: middle;">Action</th> -->
<!-- 								</tr> -->
<!-- 								<tr class="headerBox greyBackground"> -->
<!-- 									<th class="formListStyle"> -->
<!-- 										<input name="filter" size="8" onkeyup="Table.filter(this,this)"/> -->
<!-- 									</th> -->
<!-- 									<th class="formListStyle"> -->
<!-- 										<input name="filter" size="8" onkeyup="Table.filter(this,this)"/> -->
<!-- 									</th>							 -->
<!-- 								</tr> -->
							</thead>	
							
							<tbody>
								<logic:notEmpty name="eclassForm" property="listExamPrepDetail">
									<logic:iterate id="listData" name="eclassForm" property="listExamPrepDetail">
										<tr align="center">
											<td align="center" class="formListStyle"><bean:write name="listData" property="className" /></td>
											<td align="center" class="formListStyle"><bean:write name="listData" property="noOfQuestion" /></td>												
<!-- 											<td class="formListStyle"> -->
<%-- 												<input type="button" class="buttonStyle" value="Update" onclick="javascript:update('<bean:write name="listData" property="examPrepDetailId" />');"> --%>
<%-- 												<input type="button" class="buttonStyle" value="Delete" onclick="javascript:deleteSubject('<bean:write name="listData" property="examPrepDetailId" />','<bean:write name="listData" property="className" />');"> --%>
<!-- 											</td> -->
											 <td align="center" class="formListStyle" width="10%">
											 	<html:hidden property="examPrepDetailId" name="listData" />
												<img src="images/cancelButton.png" title="delete" style="cursor: pointer;" onclick="javascript:deleteText(this.id);"/>
								            </td>
										</tr>
									</logic:iterate>
								</logic:notEmpty>
							
								<logic:empty name="eclassForm" property="listExamPrepDetail">
									<tr>
										<td colspan="3" align="center" class="formListStyle">Data Empty</td>
									</tr>
								</logic:empty>
							</tbody>							
									
							<tfoot>
							<tr id="insertRow" align="center">
								<td class="formListStyle">
									<html:hidden property="modelExamPrepDetail.examPrepDetailId" name="eclassForm"></html:hidden>
									<html:select styleClass="comboStretch" property="modelExamPrepDetail.classId" onchange="javascript:showNmberOfQuestion();">
										<%-- <html:option value="">Select</html:option> --%>
										<logic:notEmpty name="eclassForm" property="listClass">
										 	<html:optionsCollection name="eclassForm" property="listClass" label="className" value="classId"/>
										</logic:notEmpty>
									</html:select>
								</td>
								<td class="formListStyle">
									<html:text size="3" property="modelExamPrepDetail.noOfQuestion" name="eclassForm"  maxlength="3" onkeyup="javascript:onlyNumberAllowed('modelExamPrepDetail.noOfQuestion');validateNumOfQuestion();"></html:text>
									/ <span id = "numOfQuest"></span>
								</td>
								<td width="100px" class="formListStyle">
									<input type="button" id="insertBtn" class="buttonStyle" value="Add" onclick="javascript:insertExamPrepDetail();">
									<input type="button" id="cancelBtn" class="buttonStyle" value="Cancel" onclick="javascript:hideField();">
								</td>
							</tr>
							<tr>
								<td align="center" style="padding:5px 7px;" colspan="3">
									<div title="add detail" style="cursor:pointer;" onclick="javascript:appendText();">
										<table>
											<tr>
												<td style="vertical-align: middle; padding:2px;"><img src="images/addButton.png"></td>
												<td style="vertical-align: middle; padding:2px;"><b>Add Detail</b></td>
											</tr>
										</table>
									</div>
								</td>
							</tr>
								<tr>
									<td colspan="3" align="center" class="formListStyle">
<!-- 										<input type="button" class="buttonStyle" style="width: auto;" value="Add New Subject" onclick="javascript:showFieldInsert();"> -->
										<input type="button" class="buttonStyle" style="width: auto;" value="Back to List Exam Prep" onclick="javascript:updateNBackToList();">
									</td>
								</tr>
<!-- 								<tr> -->
<!-- 									<td align="left" class="table-page:previous" style="cursor:pointer; padding:5px 7px;">&lt; &lt; Previous</td> -->
<!-- 									<td colspan="1" style="text-align:center; vertical-align: middle;">Page <span id="t1page"></span>&nbsp;of <span id="t1pages"></span></td> -->
<!-- 									<td align="right" class="table-page:next" style="cursor:pointer; vertical-align: middle; padding:5px 7px;">Next &gt; &gt;</td> -->
<!-- 								</tr> -->
<!-- 								<tr> -->
<!-- 									<td colspan="5" align="center" style="padding:5px 7px;"><span id="t1filtercount"></span>&nbsp;of <span id="t1allcount"></span>&nbsp;rows match filter(s)</td> -->
<!-- 								</tr> -->
							</tfoot>
						</table>
						
	<!-- 					<table> -->
	<!-- 						<tr> -->
	<!-- 							<td colspan="5" align="center">Update Batch</td> -->
	<!-- 						</tr> -->
	<!-- 						<tr> -->
	<!-- 							<td>Batch Id</td> -->
	<!-- 							<td>Batch Name</td> -->
	<!-- 							<td>Start Date</td> -->
	<!-- 							<td>End Date</td> -->
	<!-- 						</tr> -->
	<!-- 						<tr> -->
	<%-- 							<td><html:text name="eclassForm" property="modelExamPrepDetail.batchId" /></td> --%>
	<%-- 							<td><html:text name="eclassForm" property="modelExamPrepDetail.batchName" /></td> --%>
	<%-- 							<td><html:text name="eclassForm" property="modelExamPrepDetail.startDate" /></td> --%>
	<%-- 							<td><html:text name="eclassForm" property="modelExamPrepDetail.endDate" /></td> --%>
	<!-- 							<td><input type="button" id="updateBtn" value="Add" -->
	<!-- 								onclick="javascript:flyToPage('updateBatch');"> -->
	<!-- 							</td> -->
	<!-- 						</tr> -->
	<!-- 					</table> -->
					</html:form><br>
				</td>
			</tr>
			
			<!-- Footer -->
			<tr>
				<td align="center" colspan="2" class="headerBox blueBackground">&copy; OME. 2013. All Rights Reserved.</td>
			</tr>
		</table>
	</center>
</body>
</html>